<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <treeTools :node-data="companyInfo" :is-company="true" />
        <hr>
        <!-- 树形部门 -->
        <el-tree :data="depts" :default-expand-all="true" :props="{label:'name'}">
          <template v-slot="scoped">
            <treeTools
              :node-data="scoped.data"
              @editDepts="editDepts"
              @addDepts="addDepts"
              @reloadPage="loadpage"
            />
            <template />
          </template>
        </el-tree>
        <addDepts ref="editDepts" :is-show-dialog.sync="isShowDialog" :node-data="nodeData" @reloadPage="loadpage" />
      </el-card>
    </div>
  </div>
</template>

<script>
import treeTools from './componet/tree-tools.vue'
import { getDeptsList } from '@/api/department'
import { listToTreeData } from '@/utils/index'
import addDepts from './componet/add-depts.vue'
export default {
  components: {
    treeTools,
    addDepts
  },
  data() {
    return {
      // 演示树形部门数据
      depts: [
        // 数组每个对象都是一个节点,
        // element ui 要求树形 label 属性指定当前节点名称
        // children 属性指定子节点数组, 每层子节点数组结构相似
        // 如果后端数据字段名不一样, 就要在el-tree组件中定义 props 指定对应字段名
        {
          name: '总裁办',
          manager: '小王'
        },
        {
          name: '人事部'
        },
        {
          name: '财务部',
          children: [
            {
              name: '会计',
              manager: '老王'
            },
            {
              name: '出纳'
            }
          ]
        },
        {
          name: '技术部',
          children: [
            {
              name: '前端'
            },
            {
              name: '后端',
              manager: '大王'
            }
          ]
        }
      ],
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      isShowDialog: false,
      nodeData: {}
    }
  },
  async created() {
    // 刷新数据
    this.loadpage()
  },
  methods: {
    // 新增部门
    addDepts(nodeData) {
      // 显示弹窗
      this.isShowDialog = true
      // 赋值
      this.nodeData = nodeData
      console.log(91, nodeData)
    },
    async editDepts(nodeData) {
      this.isShowDialog = true
      console.log(nodeData)
      await this.$refs.editDepts.getDeptsDetail(nodeData.id)
    },
    async loadpage() {
      const { depts } = await getDeptsList()
      // 这里拿到的数据是以pid的形式进行获取,,所以要改造数据
      // 空字符串是跟后端有约定的顶级部门 pid
      // 第一层筛选的都是 pid === ''
      this.depts = listToTreeData(depts, '')
      console.log(90, depts)
    }
  }
}
</script>

<style>

</style>
